<template>
    <el-select v-model="selected" multiple filterable remote reserve-keyword :placeholder="placeholder" :remote-method="remoteQuery" :loading="loading" @change="selectChanged" style="width:100%">
        <el-option v-for="item in passports" :key="item.PassportNo" :label="getLabel(item)" :value="item.Id"> </el-option>
    </el-select>
</template>

<script>

// 定时器句柄
let timerHandle = null;

export default {
    props: {
        'placeholder': {
            type: String,
            default: '请输入用户姓名、通行证号码或者用户账号'
        },
        'types': {
            type: Array,
            default: () => ['USER']
        }
    },
    data() {
        return {
            selected: [],
            loading: false,
            passports: []
        }
    },
    methods: {

        getLabel(item) {
            let label = item.PassportNo + ' ' + item.Name;
            if(!this.types || this.types.length == 0) {
                label = (item.Type == 'USER' ? '[个人] ' : '[团队] ') + label;
            }
            return label;
        },

        // 查询通行证
        remoteQuery(search) {
            if (timerHandle) {
                clearTimeout(timerHandle);
                timerHandle = null;
            }
            if (search !== '') {                
                timerHandle = setTimeout(() => {
                    this.loading = true;
                    this.$PassportService.Fulltext(search, this.types)
                        .then(ret => {
                            this.loading = false;
                            this.passports = ret;
                        })
                }, 500);
            }
        }, 

        selectChanged(val) {
            this.$emit('PassportSelectChanged', val);
        },

        clear() {
            this.selected = [];
        }
    }
}
</script>

<style>

</style>
